import { getLocalStorage, setLocalStorage } from "../hooks/storage";
import { useLoginStore } from "/@ts/store/modules/login";
import { ElMessageBox } from "element-plus";

export const checkVersion = () => {
  // 获取当前版本号(从package.json中获取)
  const currentVersion = __APP_VERSION__;

  // 从localStorage中获取上次访问的版本号
  const lastVersion = getLocalStorage("app_version");

  if (lastVersion && lastVersion !== currentVersion) {
    ElMessageBox.confirm(
      "检测到新版本，请刷新页面获取最新内容",
      "版本更新提示",
      {
        confirmButtonText: "刷新",
        cancelButtonText: "取消",
        type: "warning",
      }
    ).then(() => {
      // 清除缓存
      //   localStorage.clear();
      //   sessionStorage.clear();
      // 刷新页面
      window.location.reload(true);
    });
  }

  // 保存当前版本号
  setLocalStorage("app_version", currentVersion);
};

// 美化打印实现方法
const prettyLog = () => {
  const isProduction = import.meta.env.VITE_NODE_ENV === "production";

  const isEmpty = (value: any) => {
    return value == null || value === undefined || value === "";
  };
  const prettyPrint = (title: string, text: string, color: string) => {
    if (isProduction) return;
    console.log(
      `%c ${title} %c ${text} %c`,
      `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;;padding-top:2px`,
      `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};padding-top:2px`,
      "background:transparent"
    );
  };
  const info = (textOrTitle: string, content = "") => {
    const title = isEmpty(content) ? "Info" : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, "#909399");
  };
  const error = (textOrTitle: string, content = "") => {
    const title = isEmpty(content) ? "Error" : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, "#F56C6C");
  };
  const warning = (textOrTitle: string, content = "") => {
    const title = isEmpty(content) ? "Warning" : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, "#E6A23C");
  };
  const success = (textOrTitle: string, content = "") => {
    const title = isEmpty(content) ? "Success " : textOrTitle;
    const text = isEmpty(content) ? textOrTitle : content;
    prettyPrint(title, text, "#67C23A");
  };
  const table = (tableData) => {
    if (isProduction) return;
    if (Array.isArray(tableData) && tableData.length > 0) {
      console.table(tableData);
    }
  };
  const object = (title: string, data?: any) => {
    if (isProduction) return;

    if (data === undefined) {
      // 只有一个参数时，直接打印对象
      console.log(
        "%c Object %c",
        "background:#35495E; padding: 1px; border-radius: 2px; color: #fff;",
        "background:transparent"
      );
      console.dir(title);
    } else {
      // 打印标题和对象
      console.group(
        `%c ${title} %c`,
        "background:#35495E; padding: 1px; border-radius: 2px; color: #fff;",
        "background:transparent"
      );

      // 如果是对象，使用console.dir以树形结构显示
      if (typeof data === "object") {
        console.dir(data);
      } else {
        console.log(data);
      }

      console.groupEnd();
    }
  };
  const picture = (url: string, scale = 1) => {
    if (isProduction) return;
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      const c = document.createElement("canvas");
      const ctx = c.getContext("2d");
      if (ctx) {
        c.width = img.width;
        c.height = img.height;
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.drawImage(img, 0, 0);
        const dataUri = c.toDataURL("image/png");

        console.log(
          `%c sup?`,
          `font-size: 1px;
                  padding: ${Math.floor(
                    (img.height * scale) / 2
                  )}px ${Math.floor((img.width * scale) / 2)}px;
                  background-image: url(${dataUri});
                  background-repeat: no-repeat;
                  background-size: ${img.width * scale}px ${img.height *
            scale}px;
                  color: transparent;
                  `
        );
      }
    };
    img.src = url;
  };

  // retu;
  return {
    info,
    error,
    warning,
    success,
    picture,
    table,
    object,
  };
};

export const initGlobal = () => {
  window["log"] = prettyLog();
};
